import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from "@tarojs/components"
import { AtTabs, AtTabsPane } from 'taro-ui'
import Cata from "./cata"
import FoodList from "./foodlist"
import './food.scss'

class Food extends Component {
  constructor() {
    super(...arguments);
    this.state = {
      current: 0,
      tabList: [{ title: '点菜' }, { title: '评价' }, { title: '商家' }],
      foodList: [],
      currentList: [],
      selectCata: null
    }
  }
  changeTab(value) {
    this.setState({
      current: value
    })
  }
  changeCata(selectCata) {
    const { foodList } = this.state;
    this.setState({
      selectCata
    })

    if (foodList && foodList.some(item => item.pid == selectCata.id)) {
      //  不用加载数据
      this.setState({
        currentList: foodList.filter(item => item.pid == selectCata.id)
      })
    } else {
      //  需要加载 拼接
      this.setState({
        foodList: foodList.concat(this.getData(selectCata))
      }, () => {

        this.setState({
          currentList: this.state.foodList.filter(item => item.pid == selectCata.id)
        })
      })
    }
  }
  getData(selectCata) {
    let count = Math.round(Math.random() * 2);
    return Array.from(Array(Math.round(Math.random() * 20)), (v, k) => (
      {
        title: "分类" + selectCata.id + "菜品" + (k + 1),
        id: selectCata.id + "_" + k,
        pid: selectCata.id,
        img: count,
        sole: Math.round(Math.random() * 50),
        price: Math.round(Math.random() * 20)
      }))
  }
  render() {
    const { current, tabList, currentList } = this.state;
    return (
      <View>
        <AtTabs
          current={current}
          onClick={this.changeTab.bind(this)}
          tabList={tabList}>
          <AtTabsPane>
            <View className="food">
              <Cata onChangeCata={this.changeCata.bind(this)} style="width: 60PX" />
              <FoodList currentList={currentList} selectCata={selectCata} style="flex:1" />
            </View>
          </AtTabsPane>
          <AtTabsPane>评价</AtTabsPane>
          <AtTabsPane>商家</AtTabsPane>
        </AtTabs>
      </View>
    )
  }
}
export default Food